<!--
    描述：bootstrap 百度地图-坐标拾取 需要配置 baidu_map_ak
    html:
    <div class="form-group baidumap_position">
      <label for="inputtitle" class="col-md-2 col-lg-2 control-label">门店经纬度</label>
      <div class="col-md-10 col-lg-10">
          经度<input type="text" value="" name="lng" class="lng"/>纬度<input type="text" value="" name="lat" class="lat"/>
          <button type="button" class="js_baidumap btn btn-primary btn-sm" data-toggle="modal" data-target="#baidumap">点击选择百度地图
          </button>
          <div class="help-block">(百度地图内省市区为必选项)</div>
      </div>
    </div>
-->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak={:config('baidu_map_ak')}"></script>
<div class="modal fade" id="baidumap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
      </button>
      <h4 class="modal-title" id="myModalLabel">百度地图-请选择经度纬度</h4>
    </div>
    <div class="modal-body" style="height:560px;">
        <div class="form form-inline">
            <div class="am-cf">
                <div class="am-fl">
                    <select id="js-tpl-province" name="province" onchange="pac(this.value,'city')"><option value="">= 选择省份 =</option></select>
                    <select id="js-tpl-city" name="city" onchange="pac(this.value,'district')"><option value="">= 先选省份 =</option></select>
                    <select id="js-tpl-district" name="district"><option value="">= 先选城市 =</option></select>
                    <input type="text" class="js_val_key" id="hbd_suggestId" placeholder="输入关键词查询"/>
                    <button class="btn-sm btn btn-primary js_search"><i class="icon-search"></i>搜索</button>
                </div>
                <div class="am-fr">
                  <button type="button" class="btn btn-sm btn-primary js_choose_position">确定此坐标</button>
                  <button type="button" class="btn btn-sm btn-default js_close" data-dismiss="modal">取消
                  </button>
                </div>
            </div>
            <div class="">当前经纬度:<span class="lng">120.337985</span>,<span class="lat">30.314933</span>.<span
      class="text-danger">注: 请确定跳动的红点必须在您选择的位置上。</span>
            </div>
        </div>

        <div id="js-baidu-map" style="width:100%;height:420px;overflow: hidden;float:left;"></div>
        <div id="js-result" style="width:100%;height:420px;overflow: scroll;"></div>
    </div>
  </div>
</div>
</div>
<script>
$(function(){
   pac('',"province");//生成所有省
})
function pac(code, type) {
    var html = '<option value="">= ';
    if(type == 'province'){        html += '选择省份';
    }else if(type == 'city'){      html += '先选省份';
    }else if(type == 'district'){  html += '先选城市';
    }
    html += ' =</option>';
    $.ajax({
        url: "{:url('common/area')}",
        type: "post",
        data: {
            code: code
        },
        async: false,
        dataType: "json",
        success: function (data) {
            console.log(data);
            var $tar = $("#js-tpl-" + type);
            //1.清空option
            var item,len=Object.keys(data).length;
            for (var i = 0; i < len; i++) {
                item = data[i];
                //2.追加option
                html += "<option value='" + item.code + "'>" + item[type] + "</option>";
            }
            $tar.html(html);
        }

    })
}
</script>
<script type="text/javascript">

    $(function () {

        // 百度地图API功能
        var map = new BMap.Map("js-baidu-map");
        var point = new BMap.Point(120.337985, 30.314933);
        var marker = new BMap.Marker(point); // 创建标注
        map.addOverlay(marker); // 将标注添加到地图中
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        marker.enableDragging();
        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom(true);
        var local = new BMap.LocalSearch(map, {
            renderOptions: {map: map, panel: "js-result"}
        });
        $("#baidumap .js_search").click(function () {
            var keyword = $("#baidumap .js_val_key").val();
            local.search(keyword);
        });
        $("#baidumap .addr_value").change(function () {
            var keyword = $(this).find("option:selected").text();
            local.search(keyword);
        });

        var ac = new BMap.Autocomplete({
            //建立一个自动完成的对象
            "input": "hbd_suggestId", "location": map
        });
        map.addEventListener("click", function (e) {
            addMarker(e.point.lng, e.point.lat);
        });

        function addMarker(lng, lat) {
            map.clearOverlays();
            $("#baidumap .lng").text(lng);
            $("#baidumap .lat").text(lat);
            point = new BMap.Point(lng, lat);
            marker = new BMap.Marker(point); // 创建标注
            map.addOverlay(marker); // 将标注添加到地图中
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            marker.enableDragging();
        }

        // plugin definition
        $.fn.baidumap = function (options) {
            var defaults = {
                container: '.baidumap_position'
            };

            var that = this;
            console.log(that);
            var opts = $.extend(defaults, options);

            var tagname = $(".lng", opts.container).prop("tagName");

            if (tagname == "INPUT") {
                addMarker($(".lng", opts.container).val(), $(".lat", opts.container).val());
            } else {
                addMarker($(".lng", opts.container).text(), $(".lat", opts.container).text());
            }
            $("#baidumap .js_choose_position").click(function () {
                var lng = $("#baidumap .lng").text();
                var lat = $("#baidumap .lat").text();
                var tagname = $(".lng", opts.container).prop("tagName");
                console.log(tagname);
                if (tagname == "INPUT") {
                    $(".lng", opts.container).val(lng);
                    $(".lat", opts.container).val(lat);
                } else {
                    $(".lng", opts.container).text(lng);
                    $(".lat", opts.container).text(lat);
                }

                $("#baidumap .js_close").click();
            })
        };
        // 开启监听
        $.fn.baidumap({ container: '.baidumap_position' });
    });
</script>
<!-- END -->